<template>
  <div class="source-detail">
    <div class="source-detail__select">
      <div class="source-detail__select-city">
        <el-select v-model="city" size="mini" @change="changeCity">
          <el-option
            v-for="(item, i) in cityList"
            :key="i"
            :label="item"
            :value="item"
            >
          </el-option>
        </el-select>
      </div>
      <div class="source-detail__select-zones">
        <el-select v-model="zoneId" size="mini" @change="getData">
          <el-option
            v-for="item in zonesList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            >
          </el-option>
        </el-select>
      </div>
      <div class="source-detail__select-date">
        <el-date-picker
          v-model="dayTime"
          type="month"
          :clearable="false"
          size="mini"
          value-format="yyyy-MM"
          format="yyyy年M月"
          @change="getData">
        </el-date-picker>
      </div>
    </div>
    <ve-ring :data="chartData" :settings="chartSettings" :extend="chartExtend" width="100%" height="13rem"></ve-ring>
  </div>
</template>

<script>
  import Vring from 'v-charts/lib/ring.common'
  import { Select, Option, DatePicker } from 'element-ui'
  import { getGdly, getZonesList } from 'src/api/api'
  import { formatDate, formatFontSize } from 'js/utils'
  import storage from 'good-storage'
  export default {
    components: {
      [Vring.name]: Vring,
      [Select.name]: Select,
      [DatePicker.name]: DatePicker,
      [Option.name]: Option
    },
    data () {
      return {
        chartData: {
          columns: ['name', 'value'],
          rows: [],
        //   labelMap: {
        //   'name': '来源',
        //   'value': '数量',
        // },
        },
        chartSettings: {
          dimension: 'name',
          metrics: 'value',
          radius: ['45%', '60%'],
          offsetY: formatFontSize(1),
          label: {
            // show: false,
            fontSize: formatFontSize(0.1),
          }
        },
        chartExtend: {
          title:[
            {
              text: '工单',
              subtext: '来源',
              textStyle:{
                fontSize: formatFontSize(0.18),
                color: '#fff',
                fontWeight: 'normal',
              },
              subtextStyle: {
                fontSize: formatFontSize(0.18),
                color: '#fff',
                fontWeight: 'normal'
              },
              textAlign:"center",
              x: '29%',
              y: '35%',
            }
          ],
          tooltip: {
            show: true,
            position: ['25%', '40%'],
          },
          legend: {
            textStyle: {
              color: '#fff',
              fontSize: formatFontSize(0.12),
            },
            selectedMode: false,
            orient: 'vertical',
            align: 'left',
            right: 0, 
            top: '10%',
            itemWidth: formatFontSize(0.12),
            itemHeight: formatFontSize(0.06),
            formatter: param => {
              let data = this.chartData.rows
              let target
              for(let i=0; i<data.length; i++) {
                if(data[i].name == param) {
                  target = data[i].value
                }
              }
              return param + '  '+ target + '单'
            }
          },
          series: {
            center: ['30%', '50%']
          },
          color: ['#FFEA00', '#0A8CFF', '#45F0EA', '#0E962A', '#53ED73' ,'#E56F82', '#981DD9'],
        },
        cityList: storage.get('cityList'),
        city: storage.get('cityList')[0],
        zonesList: [],
        zoneId: 14,
        dayTime: formatDate('yyyy-mm', new Date()),
      }
    },
    mounted() {
      this._getZonesList()
      this.getData()
    },
    methods: {
      _getZonesList() {
        let params = {
          city: this.city
        }
        getZonesList(params).then(res=> {
          if (res.success === true) {
            this.zonesList = res.data
          }
        })
      },
      getData() {
        const params = {
          city: this.city,
          zoneId: this.zoneId,
          dayTime: this.dayTime,
        }
        getGdly(params).then(res=> {
          this.chartData.rows = 
          [
            { 'name': '金盟生活APP', 'value': res.data.type3 },
            { 'name': '电话-呼叫中心', 'value': res.data.type1 },
            { 'name': '电话-项目电话', 'value': res.data.type6 },
            { 'name': '微信-管家微信', 'value': res.data.type2 },
            { 'name': '微信-业主群', 'value': res.data.type7 },
            { 'name': '项目现场', 'value': res.data.type4 },
            { 'name': '其它', 'value': res.data.type5 },
          ]
        })
      },
      changeCity() {
        let params = {
          city: this.city
        }
        getZonesList(params).then(res=> {
          if (res.success === true) {
            this.zonesList = res.data
            this.zoneId = res.data[0].id
            this.getData()
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .source-detail {
    padding-bottom: 20px;
    &__select {
      text-align: right;
      padding: 5px 10px 5px 0;
      font-size: 14px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: #AAECFF;
      .el-select, .el-date-editor {
        .el-input__inner {
          // width: 150px;
          border: 0;
          border-radius: 0;
          background:rgba(11,21,58,1);
          box-shadow:1px 1px 0px 0px rgba(255,255,255,0.25), 0px 2px 4px 0px rgba(0, 0, 0, 1);
          color: #AAECFF;
          font-size: 14px;
        }
        .el-input__icon {
          color: #AAECFF;
          font-size: 14px;
        }
      }
      &-city {
        margin-right: 20px;
        .el-select {
          width: 80px;
        }
      }
      &-zones {
        margin-right: 20px;
        .el-select {
          width: 120px;
        }
      }
      &-date {
        // margin-right: 20px;
        .el-date-editor {
          width: 100px;
        }
        .el-input__prefix ,.el-input__suffix{
          display: none;
        }
        .el-input--prefix .el-input__inner {
          padding-left: 5px;
        }
        .el-input--suffix .el-input__inner {
            padding-right: 0px;
        }
      }
    }
  }
</style>